<!-- 加班列表 -->
<template>
  <div></div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from 'vue'
import * as utils from '../utils'
import http from '../http'
import { useUsersStore } from '../stores'
import { overtimeStatusEnum } from '../definitions/status'

const tableData = ref<any[]>([])
const tableColumnDate = ref<any[]>([])
const tableWrap = ref<HTMLElement | null>(null)
const tableHeight = ref(500)
const queryForm = reactive({
  user: '',
  projectId: null,
  date: [] as Date[],
  deptIds: [] as any[] | number[],
  overtimeStatus: null,
})

const overtimeStatusOptions = ref<any[]>([])

Object.keys(overtimeStatusEnum).map((value: any) => {
  const label = overtimeStatusEnum[value]
  if (typeof label === 'string' && value !== '3') {
    overtimeStatusOptions.value.push({
      label,
      value,
    })
  }
})

enum shortcutsType {
  本年 = '本年',
  前后半年 = '前后半年',
  近一月 = '近一月',
  本月 = '本月',
  本周 = '本周',
  今天 = '今天',
}

// const shortcuts = [
//   {
//     text: shortcutsType.本年,
//     value: () => getDateRange(shortcutsType.本年),
//   },
//   {
//     text: shortcutsType.前后半年,
//     value: () => getDateRange(shortcutsType.前后半年),
//   },
//   {
//     text: shortcutsType.近一月,
//     value: () => getDateRange(shortcutsType.近一月),
//   },
//   {
//     text: shortcutsType.本月,
//     value: () => getDateRange(shortcutsType.本月),
//   },
//   {
//     text: shortcutsType.本周,
//     value: () => getDateRange(shortcutsType.本周),
//   },
//   {
//     text: shortcutsType.今天,
//     value: () => getDateRange(shortcutsType.今天),
//   },
// ]

/**
 * 根据传入的快捷方式类型获取对应的日期范围
 *
 * @param type 快捷方式类型
 * @returns 日期范围数组，包含开始日期和结束日期，如果没有找到对应的类型，则返回null
 */
const getDateRange = (type: shortcutsType) => {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = currentDate.getMonth()
  const dayOfWeek = currentDate.getDay()
  let start, end
  switch (type) {
    case shortcutsType.本月:
      start = new Date(year, month, 1)
      end = new Date(year, month + 1, 0)
      break
    case shortcutsType.本周:
      start = new Date(currentDate.getTime() - dayOfWeek * 24 * 60 * 60 * 1000)
      end = new Date(start.getTime() + 6 * 24 * 60 * 60 * 1000)
      break
    case shortcutsType.近一月:
      start = new Date(currentDate.getTime() - 30 * 24 * 60 * 60 * 1000)
      end = currentDate
      break
    case shortcutsType.今天:
      end = new Date()
      start = new Date()
      break
    case shortcutsType.本年:
      start = new Date(year, 0, 1)
      end = new Date(year, 11, 0)
      break
    case shortcutsType.前后半年:
      // 计算前面第6个月的日期
      const sixMonthsAgoYear = month < 6 ? year - 1 : year
      const sixMonthsAgoMonth = (month + 6) % 12

      // 计算后面第5个月的日期
      const fiveMonthsLaterYear = month > 6 ? year + 1 : year
      const fiveMonthsLaterMonth = (month + 5) % 12

      start = new Date(sixMonthsAgoYear, sixMonthsAgoMonth, 1)
      end = new Date(fiveMonthsLaterYear, fiveMonthsLaterMonth + 1, 0)
      break
    default:
      return null
  }

  return [start, end]
}
/**
 * 获取考勤分类列表
 *
 * @returns {Promise<void>}
 */
const getClockinCategoryList = async () => {
  const [start, end] = queryForm.date
  // 设置 table 列
  tableColumnDate.value = utils.generateDates(start, end)

  // 设置查询参数
  const params = {
    deptId: useUsersStore().getAllState().deptId,
    pageSize: 99999,
    startTime: utils.formatDate(start, 'yyyy-MM-dd'),
    endTime: utils.formatDate(end, 'yyyy-MM-dd'),
  }
  if (queryForm.overtimeStatus) {
    Object.assign(params, { overtimeStatus: queryForm.overtimeStatus })
  }
  if (queryForm.projectId) {
    Object.assign(params, { projectId: queryForm.projectId })
  }
  if (queryForm.user !== '') {
    Object.assign(params, { userName: queryForm.user })
  }

  const { rows } = await http({
    method: 'GET',
    path: '/dev-api/oa/overtime/list',
    params,
  })
  tableData.value = rows
  nextTick(() => {
    const tableWrapElement = tableWrap.value
    if (tableWrapElement) {
      // 设置表格高度
      tableHeight.value = tableWrapElement.offsetHeight
    }
  })
}
/**
 * 重置表单
 *
 * 重置查询表单的所有字段到初始状态，包括用户、项目ID、日期范围、部门ID数组和时间日志类别
 */
const resetForm = () => {
  tableData.value = []
  const [start, end] = getDateRange(shortcutsType.本月) as Date[]
  queryForm.user = ''
  queryForm.projectId = null
  queryForm.date = [start, end]
  queryForm.deptIds = [] as string[] | number[]
  queryForm.overtimeStatus = null
  handleClickBtnSubmit()
}
/**
 * 处理点击提交按钮的事件
 *
 * 异步调用获取打卡分类列表的函数
 */
const handleClickBtnSubmit = async () => {
  await getClockinCategoryList()
}

/**
 * 处理点击重置按钮的事件
 *
 * 调用 resetForm 函数重置表单
 */
const handleClickBtnReset = async () => {
  await resetForm()
}

// const getProjectName = (id: any) => {
//   const item = projectList.value.find((item) => item.id == id)
//   return item?.cname || ''
// }

// const handleSelectionChange = (val: any[]) => {
//   multipleSelection.value = val
// }

// const handleClickBtnUpdateOvertimeStatus = async (status: number, row: any | null = null) => {
//   let ids: any[] = []
//   if (!row) {
//     if (multipleSelection.value.length === 0) return ElMessage.warning('请选择要操作的记录')
//     ids = multipleSelection.value.map((obj) => obj.id)
//   } else {
//     ids = [row.id]
//   }

//   const { code } = await http({
//     method: 'PUT',
//     path: '/dev-api/oa/overtime/approved',
//     params: {
//       ids,
//       overtimeStatus: status,
//       updateBy: useUsersStore().user.username,
//     },
//   })
//   if (code == 200) {
//     ElMessage.success('操作成功')
//     await handleClickBtnSubmit()
//   }
// }

onMounted(async () => {
  await handleClickBtnReset()
})
</script>
<style lang="scss" scoped>
.overitem-list {
  display: flex;
  flex-direction: column;
  .form-container {
    display: flex;
    justify-content: flex-start;
  }
  .table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .table-wrap {
      flex: 1;
    }
  }
  .button-toolbar {
    margin-bottom: 18px;
  }
  .table-header-cell {
    writing-mode: vertical-lr;
  }
  .remark-content {
    width: 100%;
    height: 100%;
    white-space: pre-line;
  }
}
</style>
